
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>我的足迹</title>
    <link rel="icon" href="/assets/img/favicon.ico">

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-seckillOrder.css"/>
    <style>
        .p-state {
            position: absolute;
            /*left: 50%;*/
            /*bottom: 0;*/
            width: 160px;
            /*margin-left: -80px;*/
            margin-left: 30px;
            overflow: hidden;
            text-align: center;
            background: rgba(0, 0, 0, .7);
            font-size: 14px;
            color: #fff;
        }

        .x-state {
            position: absolute;
            left: 80%;
            width: 160px;
            overflow: hidden;
            text-align: center;
            font-size: 15px;
            color: #3767fc;
        }

        .price {
            height: 22px;
            line-height: 22px;
            padding: 0 10px;
            overflow: hidden;
            text-align: center;
            color: #333;
            font-family: verdana;
            font-weight: 700;
        }

        .btn-similar {
            background: #f9f9f9 none repeat scroll 0 0;
            border: 1px solid #eee;
            cursor: pointer;
            display: inline-block;
            height: 25px;
            line-height: 25px;
            padding: 0;
            text-align: center;
            width: 100%;
            color: #666666;
        }
    </style>
</head>

<body>
<!--页面顶部白条条，由js动态加载-->
<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
<div id="nav-bottom"><ly-top/></div>
<!--<script type="text/javascript">$("#nav-bottom").load("top.html");</script>-->
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var cartVm = new Vue({
        el: "#nav-bottom",
        components: {
            lyTop: () => import("./js/pages/top.js")
        },
    })
</script>

<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#service").hover(function () {
            $(".service").show();
        }, function () {
            $(".service").hide();
        });
        $("#shopcar").hover(function () {
            $("#shopcarlist").show();
        }, function () {
            $("#shopcarlist").hide();
        });

    })
</script>
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
</body>
<!--header-->
<div id="account">
    <div class="py-container">
        <div class="yui3-g collect">
            <!--左侧列表-->
            <div class="yui3-u-1-6 list">

                <div class="person-info">
                    <div class="person-photo"><img src="img/_/photo.png" alt=""></div>
                    <div class="person-account">
                        <span class="name">Michelle</span>
                        <span class="safe">账户安全</span>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="list-items">
                    <dl>
                        <dt><i>·</i> 订单中心</dt>
                        <dd><a href="home-index.html">我的订单</a></dd>
                        <dd><a href="home-order-pay.html">待付款</a></dd>
                        <dd><a href="home-order-send.html">待发货</a></dd>
                        <dd><a href="home-order-receive.html">待收货</a></dd>
                        <dd><a href="home-order-evaluate.html">待评价</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 我的中心</dt>
                        <dd><a href="home-person-collect.html">我的收藏</a></dd>
                        <dd><a href="home-person-footmark.html" class="list-active">我的足迹</a></dd>
                    </dl>
                    <dl>
                        <dt><i>·</i> 物流消息</dt>
                    </dl>
                    <dl>
                        <dt><i>·</i> 设置</dt>
                        <dd><a href="home-setting-info.html">个人信息</a></dd>
                        <dd><a href="home-setting-address.html">地址管理</a></dd>
                        <dd><a href="home-setting-safe.html">安全管理</a></dd>
                    </dl>
                </div>
            </div>
            <!--右侧主内容-->
            <div class="yui3-u-5-6 goods" id="footmark">
                <div class="body">
                    <h4>全部足迹 {{favorites.length}}</h4>
                    <div class="goods-list">
                        <ul class="yui3-g" id="goods-list">
                            <li class="yui3-u-1-4" v-for=" favorite in favorites" :key="favorite.id">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <a style="text-decoration:none;color: black"
                                           :title="favorite.title" :href='"item/"+favorite.spuId+".html"'
                                           target="_blank">
                                            <img :src="favorite.image" alt=''></a>
                                        <span v-show="!favorite.enable" class="p-state">下柜</span>
                                    </div>
                                    <!--<div>-->
                                    <div class="price" v-if="favorite.enable">
                                        <strong><em>¥</em>
                                            <i>{{ly.formatPrice(favorite.newPrice)}}</i>
                                        </strong>
                                    </div>
                                    <div class="price" v-else>
                                        <span>暂无报价</span>
                                    </div>
                                    <!--</div>-->
                                    <!--<div class="attr"><em><a style="text-decoration:none;color: black"-->
                                    <div class="attr"><em><a style="text-decoration:none;color: black"
                                                             :title="favorite.title"> {{favorite.title.length >30?
                                        favorite.title.substring(0,30)+"...":favorite.title }}</a></em></div>
                                    <div class="cu" v-if="favorite.enable"><em><span>促</span>满一件可参加超值换购</em></div>
                                    <div class="cu" v-else><em><span>促</span>促的老子下架了吧</em></div>
                                    <div class="operate">
                                        <!-- 鼠标小框框 -->
                                        <span v-show="(favorite.price-favorite.newPrice)>0 && favorite.enable ">
                                            <font color="green" size="2">
                                                比关注时降价￥{{ly.formatPrice(favorite.price-favorite.newPrice)}}
                                            </font>
                                        </span><br/>
                                        <a href="javascript:void(0);" target="_blank"
                                           class="sui-btn btn-bordered btn-danger" @click="addCart(favorite)"
                                           v-if="favorite.enable">加入购物车</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered"
                                           v-if="favorite.enable">对比</a>
                                        <a href="javascript:void(0);" class="sui-btn btn-bordered"
                                           v-if="favorite.enable">降价通知</a>
                                        <a v-else target="_blank"
                                           :href='"http://www.leyou.com/search.html?key="+favorite.cname'
                                           class="op-btn btn-similar" style="text-decoration-line: none"><i
                                                class="btnico"></i><em class="btntxt">找相似</em></a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>

                    <!--猜你喜欢-->
                    <div class="like-title">
                        <div class="mt">
                            <span class="fl"><strong>猜你喜欢</strong></span>
                            <span class="x-state">
                                <a style="text-decoration-line: none" href="javascript:void(0)" @click="changePage()">
                                    换一批
                                </a>
                            </span>
                        </div>

                    </div>
                    <guess :goodslist="goodsList" :ly="ly"></guess>

                </div>
            </div>
        </div>
    </div>
</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">

    const guess = {
        // 直接使用props接收到的属性来渲染页面
        template: `<div class="like-list" >
                        <ul class="yui3-g">
                            <li class="yui3-u-1-4" v-for="goods in goodslist " :key="goods.id">
                                <div class="list-wrap">
                                    <div class="p-img">
                                        <a :href="'item/'+goods.id+'.html'" target="_blank">
                                            <img :src="goods.selected.image" :title="goods.selected.title"/>
                                        </a>
                                    </div>
                                    <div class="attr">
                                        <em><a style="text-decoration:none;color: black" :title="goods.selected.title">
                                            {{goods.selected.title.length>30?
                                            goods.selected.title.substring(0,30)+"...":goods.selected.title }}</a>></em>
                                    </div>
                                    <div class="price" style="text-align: left">
                                        <strong>
                                            <em>¥</em>
                                            <i>{{ly.formatPrice( goods.selected.price)}}</i>
                                        </strong>
                                    </div>
                                    <div class="commit">
                                        <i class="command">已有6人评价</i>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>`,
        props: {
            ly: {},
            goodslist: {
                type: Array,
                default: () => [],
                required: true
            }
        }
    }

    var footmark = new Vue({
        el: "#footmark",
        components: {
            guess  //当key和value一样时，可以只写一个
        },
        data: {
            ly,
            show: false,//降价通知显示
            favorites: [], //我的足迹
            page: 1, //换一批
            goodsList: [],
            totalPage: 1//总页数
        },
        created() {
            ly.verifyUser().then(resp => {
                ly.http.get("favorite/track").then(res => {
                    //查看我的足迹
                    this.favorites = res.data || [];
                })
                this.loadData();
            }).catch(() => {
                //未登录
                location.href = "/login.html?returnUrl=" + location.href;
            })
        },
        watch: {
            page: {
                deep: true,
                handler(nVal) {
                    this.loadData();
                }
            }
        },
        methods: {
            changePage() {
                if (this.page < this.totalPage) {
                    this.page++;
                }
            },
            addCart(favorite) {
                //加入购物车
                ly.verifyUser().then(resp => {
                    //已经登录，商品放入redis
                    ly.http.post("/cart", {skuId: favorite.skuId, num: 1}).then(res => {
                        location.href = "http://www.leyou.com/cart.html";
                    })

                }).catch(() => {
                    //未登录
                    location.href = "/login.html?returnUrl=" + location.href;
                })
            },
            loadData() {
                ly.http.post("/search/like", {page: this.page}).then(({data}) => {
                    // 总页数
                    this.totalPage = data.totalPage;
                    this.total = data.total;
                    data.items.forEach(goods => {
                        //转换sku 为对象
                        goods.skus = JSON.parse(goods.skus);
                        //添加默认选中项
                        goods.selected = goods.skus[0]
                    })

                    //处理结果集数据
                    this.goodsList = data.items;
                });
            }
        }

    })
</script>

<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->

</html>